<template>
	<view>
		<none v-if="!list.length"></none>
		<view class="listbox" v-for="(item, index) in list" :key="index">
			<view class="namebox">
				<view class="nameinfo">
					<text>{{ item.shouhuoren }}</text>
					<text class="ml-20">{{ item.mobile.slice(0, 3) }}****{{ item.mobile.slice(7, 11) }}</text>
				</view>
				<view class="defaultbox" v-if="item.isdefault == 1">默认</view>
			</view>
			<view class="info">
				<view class="addressinfo">{{ item.province }} {{ item.city }} {{ item.town }} {{ item.street }}</view>
				<view class="edit" @click="editAddress(item.id)">编辑</view>
			</view>
			<uni-icons @click.native="removeAddress(item.id)" class="remove" type="trash" color="#b0b0b0" size="24" />
		</view>
		<view style="height: 180rpx;"></view>
		<view class="navbut" @click="toAdd">
			<view class="addaddress">
				<image src="../../static/add1.png"></image>
				新建地址
			</view>
		</view>

	</view>
</template>

<script>
import none from '../../components/kong.vue'
export default {
	components: { none },
	data() {
		return {
			list: []
		}
	},
	onShow() {
		this.getList()
	},
	methods: {
		async getList() {
			try {
				let res = await this.$http({
					url: 'api/Wechat/addressList',
				})
				this.list = res.data
			} catch (err) {

			}
		},
		toAdd() {
			uni.navigateTo({ url: '/personalData/address/address' })
		},
		editAddress(id){
			uni.navigateTo({ url: '/personalData/address/address?id='+id })
		},
		removeAddress(id){
			uni.showModal({
				title: '提示',
				content: '确定删除该地址吗？',
				success: async(res) => {
					if (res.confirm) {
						await this.$http({
							url: 'api/Wechat/del_user_address',
							data: { id }
						})
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							mask: true
						})
						this.getList()
					} else if (res.cancel) {
					}
				}
			});
		}
	}
}
</script>

<style>
page {
	background-color: #F7F7F7;
}
</style>
<style lang="scss" scoped>
.remove{
	position: absolute;
	right: 20upx;
	top: 20upx;
}
.info{
	display: flex;
	align-items: flex-start;
	.edit{
		margin-top: 40upx;
		min-width: 80upx;
		text-align: right;
		font-size: 28rpx;
		color: gray;
	}
}
.listbox {
	position: relative;
	width: 630rpx;
	height: 120rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 40rpx 30rpx;
	margin: 0 auto 4rpx auto;

	.namebox {
		display: flex;
		align-items: center;

		.nameinfo {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			margin-right: 32rpx;
		}

		.defaultbox {
			width: 94rpx;
			height: 36rpx;
			background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
			border-radius: 18rpx 18rpx 18rpx 0rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.addressinfo {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		margin-top: 40rpx;
		flex:1;
	}
}

.navbut {
	width: 100%;
	height: 170rpx;
	position: fixed;
	bottom: 0rpx;

	.addaddress {
		width: 690rpx;
		height: 84rpx;
		background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
		border-radius: 83rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		justify-content: center;
		line-height: 84rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
	}
}
</style>
